<template>
	<view class="page">
		<!-- 顶部固定栏 -->
		<view class="header">
			<view class="logo">
				<uni-icons type="list" size="20" color="#FF6B6B" @tap="expandFun"></uni-icons>
				<text>PetMatch</text>
			</view>
			<view class="search-box">
				<uni-icons type="search" size="20" color="#666"></uni-icons>

				<input type="text" placeholder="搜索宠物、用品、服务" placeholder-class="search-placeholder" />
			</view>
			<view class="notify">
				<uni-icons type="notification" size="24" color="#666"></uni-icons>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view scroll-y class="content">
			<!-- 功能区 -->
			<view class="feature-section">
				<view class="feature-item" v-for="(item, index) in features" :key="index">
					<image class="feature-icon" :src="item.icon" mode="aspectFill"></image>
					<text class="feature-text">{{ item.text }}</text>
				</view>
			</view>

			<!-- 推荐文章区 -->
			<view class="article-section">
				<view class="section-title">
					<text>精选推荐</text>
					<view class="more">
						<text>更多</text>
						<uni-icons type="right" size="14" color="#666"></uni-icons>
					</view>
				</view>
				<view class="article-list">
					<view class="article-item" v-for="(item, index) in articles" :key="index">
						<image class="article-image" :src="item.image" mode="aspectFill"></image>
						<view class="article-info">
							<text class="article-title">{{ item.title }}</text>
							<text class="article-desc">{{ item.desc }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<sideBarVue v-if="showSideBar" @close="hideSideBar"></sideBarVue>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import sideBarVue from '../../components/sideBar.vue';
const showSideBar = ref(false)
const currentTab = ref(0);

const features = [
	{
		text: '宠物护理',
		icon: 'https://ai-public.mastergo.com/ai/img_res/d0a2c0131851436001f3463d072b4820.jpg'
	},
	{
		text: '诊疗服务',
		icon: 'https://ai-public.mastergo.com/ai/img_res/c4e880445ed121490fd3328cbc11a73b.jpg'
	},
	{
		text: '宠物用品',
		icon: 'https://ai-public.mastergo.com/ai/img_res/946a093c52fabff882cec192599e756c.jpg'
	},
	{
		text: '训练课程',
		icon: 'https://ai-public.mastergo.com/ai/img_res/c4b5c8cd25c3bcbd4c3ee5e40e6a7cc2.jpg'
	}
];

const articles = [
	{
		title: '如何正确给猫咪洗澡？',
		desc: '专业美容师分享实用技巧',
		image: 'https://ai-public.mastergo.com/ai/img_res/1c341aabed8fb0e926159ab2c44604d0.jpg'
	},
	{
		title: '狗狗的营养膳食指南',
		desc: '让爱宠吃出健康',
		image: 'https://ai-public.mastergo.com/ai/img_res/046477561ab4b23fcece36f05a91876e.jpg'
	},
	{
		title: '新手养宠必读攻略',
		desc: '轻松开启养宠生活',
		image: 'https://ai-public.mastergo.com/ai/img_res/1572c98104f20239a5aab94fa30234e4.jpg'
	}
];
const expandFun = () => {
	// 展开侧边栏
	showSideBar.value = true
}
const hideSideBar = () => {
	showSideBar.value = false
}
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}

.page {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #F8F9FA;
}

.header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #FFFFFF;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	flex-shrink: 0;
	gap: 20rpx;
}

.logo {
	display: flex;
	align-items: center;
	gap: 4rpx;
	min-width: fit-content;
	font-size: 32rpx;
	font-weight: bold;
	color: #FF6B6B;
}

.search-box {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #F1F3F5;
	border-radius: 32rpx;
	padding: 12rpx 24rpx;
	min-width: 0;
	/* 防止搜索框溢出 */
}

.search-box input {
	flex: 1;
	font-size: 14px;
	margin-left: 12rpx;
}

.search-placeholder {
	color: #ADB5BD;
}

.notify {
	padding: 10rpx;
}

.content {
	flex: 1;
	overflow: auto;
}

.feature-section {
	display: flex;
	justify-content: space-around;
	padding: 40rpx 20rpx;
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.feature-icon {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 16rpx;
	border-radius: 50%;
}

.feature-text {
	font-size: 14px;
	color: #495057;
}

.article-section {
	background-color: #FFFFFF;
	padding: 30rpx;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title text {
	font-size: 16px;
	font-weight: bold;
	color: #212529;
}

.more {
	display: flex;
	align-items: center;
}

.more text {
	font-size: 14px;
	color: #868E96;
	margin-right: 4rpx;
}

.article-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15rpx;
}

.article-item {
	width: calc(50% - 30rpx);
	margin: 0 15rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.article-image {
	width: 100%;
	height: 400rpx;
	background-color: #F8F9FA;
}

.article-info {
	padding: 20rpx;
}

.article-title {
	font-size: 14px;
	font-weight: bold;
	color: #212529;
	margin-bottom: 8rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.article-desc {
	font-size: 12px;
	color: #868E96;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tab-bar {
	display: flex;
	justify-content: space-around;
	padding: 16rpx 0;
	background-color: #FFFFFF;
	border-top: 1px solid #F1F3F5;
	flex-shrink: 0;
}

.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tab-text {
	font-size: 12px;
	color: #868E96;
	margin-top: 8rpx;
}

.tab-item.active .tab-text {
	color: #FF6B6B;
}
</style>